<template>
  <div id="device_statistical" style="width: 100%;height: 100%;">
      <div class="nodata" v-show="!this.data || !this.data.length">暂无数据</div>
  </div>
</template>
<script>
export default {
  mounted() {
    this._initCharts()
  },
  props: {
      data: {
          type: Array,
          default: () => []
      }
  },
  watch: {
    data (newv) {
      this._initCharts()
    }
  },
  methods: {
    _initCharts () {
        const el = document.getElementById("device_statistical")
        if(!this.data || !this.data.length) {
            if(this.$echarts) {
                this.$echarts.dispose(el)
                el.innerHTML = `<div class="nodata">暂无数据</div>`
            }
            return
        }
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(el)
      let viewData = 100
      if(this.data.length <= 5) {
        viewData = 100
      }
      let label = []
      let values = []
      this.data.forEach(item => {
        label.push(item.name)
        values.push(item.count)
      })
      var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        title: {
            text: "(个)",
            textStyle: {
                color: "#fff",
                fontSize: this.$options.filters.fontSize(0.12)
            }
        },
        grid: {
            left: '2%',
            right: '4%',
            bottom: '15%',
            top: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: label,
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: this.$options.filters.fontSize(0.12)
                }
            },
            axisTick: {
                show: false
            }
        },

        yAxis: {
            type: 'value',
            // name: "(个)",
            nameTextStyle: {
                color: '#fff',
                fontSize: this.$options.filters.fontSize(0.12)
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#242424'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: this.$options.filters.fontSize(0.12)
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)'
                }
            },
        },
        "dataZoom": [{
            "show": true,
            "height": this.$options.filters.fontSize(0.06),
            "xAxisIndex": [
                0
            ],
            bottom: '9%',
            "start": 0,
            "end": viewData,
            backgroundColor: '#303030',
            fillerColor: '#828282',
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
                color: "transparent",
            },
            textStyle: {
                color: "transparent"
            },
            borderColor: "transparent"
        }, {
            "type": "inside",
            "show": true,
            "height": this.$options.filters.fontSize(0.15),
            "start": 1,
            "end": viewData
        }],
        series: [{
                name: '消耗量',
                type: 'bar',
                barWidth: '15%',
                itemStyle: {
                    normal: {
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#888'
                        }, {
                            offset: 1,
                            color: '#222'
                        }]),
                        barBorderRadius: 0,
                    },

                },
                label: {
                    show: false,
                    position: ['-10', '-12'],
                    color: '#8E8E38',
                    fontSize: this.$options.filters.fontSize(0.12),
                },
                data: values,
            },

        ]
    };



      // 绘制图表
      myChart.setOption(option)
      
      
    }

  }
  
}
</script>
<style lang="scss" scoped>
.charts_container {
  width: 100%;
  height: 305px;
  margin-right: 19px;
  position: relative;
  box-sizing: border-box;
}
</style>